<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="24" :xs="24">
        <el-tabs v-model="activeTabName" @tab-click="handleTabClick">
          <el-tab-pane label="库存情况查询" name="first">
            <el-card>
            <div class="text item">
                <el-form ref="form" :model="queryParams" :inline="true" label-width="68px">
                  <!-- 根据服饰id查询库存情况记录 -->
                  <el-form-item label="服饰ID" prop="clId">
                    <el-input
                      v-model="queryParams.clId"
                      placeholder="请输入服饰ID"
                      size="small"
                      clearable
                      @keyup.enter.native="handleInventoryIdQuery"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      size="small"
                      @click="handleInventoryIdQuery"
                      icon="el-icon-search"
                    >查询</el-button>
                  </el-form-item>
                  <!--  -->
                </el-form>
                <el-table v-loading="loading" :data="inventoryByIdList" >
                  <el-table-column label="服饰ID" align="center" prop="clId" v-if="conditionforQuery=='cate'"/>
                  <el-table-column label="服饰名称" align="center" prop="clName" v-if="conditionforQuery=='cate'"/>
                  <el-table-column label="已销数量" align="center" prop="hasSold" />
                  <el-table-column label="库存情况" align="center" prop="inventory" v-if="conditionforQuery=='size'"/>
                  <el-table-column label="销售单价" align="center" prop="clSalePrice" />
                  <el-table-column label="成本单价" align="center" prop="clCost"/>
                </el-table>
                
            </div>
            </el-card>
            <el-card>
            <el-button-group >
              <el-button size="small" @click="handleInventoryCateQuery">各类别</el-button>
              <el-button size="small" @click="handleInventorySizeQuery">各尺码</el-button>
            </el-button-group>
            <el-table v-loading="loading" :data="inventoryList" >
              <el-table-column label="类别编号" align="center" prop="cl_category_id" v-if="conditionforQuery=='cate'"/>
              <el-table-column label="类别名称" align="center" prop="cl_category_name" v-if="conditionforQuery=='cate'"/>
              <el-table-column label="预计总销售额" align="center" prop="totalAmount" />
              <el-table-column label="服饰尺寸" align="center" prop="clSize" v-if="conditionforQuery=='size'"/>
              <el-table-column label="总库存" align="center" prop="totalInventory" />
              <el-table-column label="总库存成本" align="center" prop="totalCost"/>
            </el-table>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="退货申请" name="second">
            <!-- <el-table v-loading="loading" :data="enterOrderItemList">
              <el-table-column label="序号" align="center" prop="orderItemId" width="55" />
              <el-table-column label="商品编号" align="center" prop="gsClothes.clId" />
              <el-table-column label="服饰名称" align="center" prop="gsClothes.clName" />
              <el-table-column label="服饰类别" align="center" prop="gsCategory.clCategoryName" />
              <el-table-column label="服饰库存" align="center" prop="gsClothes.clInventory" />
              <el-table-column label="服饰售价" align="center" prop="gsClothes.clSalePrice" />
              <el-table-column label="单件售价" align="center" prop="orderItemAmount" />
              <el-table-column label="单件优惠" align="center" prop="promotionsDiscount" />
              <el-table-column label="单件应付款" align="center" prop="orderItemRealpayment" />
              <el-table-column label="商品数量" align="center" prop="orderItemQuantity" />
            </el-table> -->
              <el-card shadow="hover">
                <div class="text item">
                  <el-form ref="form" :model="returnItemVo" :inline="true" label-width="68px">
                  <!-- 创建申请 -->
                    <el-form-item label="订单编号" prop="orderId">
                      <el-input
                        v-model="returnItemVo.orderId"
                        placeholder="请输入订单编码"
                        size="small"
                        clearable
                        @keyup.enter.native="handleEnterReturn"
                      />
                    </el-form-item>
                    <el-form-item>
                      <el-select v-model="returnItemVo.returnCause" clearable placeholder="请选择">
                        <el-option v-for="item in options" 
                        :key="item.value" 
                        :label="item.label" 
                        :value="item.value" 
                        @keyup.enter.native="handleEnterReturn">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        type="primary"
                        size="small"
                        @click="handleEnterReturn"
                        icon="el-icon-edit-outline"
                      >录入</el-button>
                    </el-form-item>
                    <!--  -->
                  </el-form>
                </div>
              </el-card>
          </el-tab-pane>
          <el-tab-pane label="退货请求处理" name="third">
            <el-table v-loading="loading" :data="returnStatedList">
              <el-table-column label="序号" align="center" prop="returnId" />
              <el-table-column label="原订单号" align="center" prop="orderId" />
              <el-table-column label="退款金额" align="center" prop="returnAmount" />
              <el-table-column label="申请退货时间" align="center" prop="applyDatetime" width="240"/>
              <el-table-column label="退货状态" align="center" prop="returnState" />
              <el-table-column label="退货原因" align="center" prop="returnCause" />
              <el-table-column label="请求处理" align="center" class-name="small-padding fixed-width" fixed="right" width="140">
                <template slot-scope="scope">
                  <el-button-group >
                  <el-button
                    size="mini"
                    type="success"
                    @click="handleAgree(scope.row)"
                    >同意</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleRefuse(scope.row)"
                    >拒绝</el-button>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="退货查询" name="fourth">
            <el-card shadow="hover">
              <div class="text item">
                <el-form ref="form" :model="queryParams" :inline="true" label-width="68px">
                  <!-- 查询退货记录 -->
                  <el-form-item label="订单编号" prop="orderId">
                    <el-input
                      v-model="queryParams.orderId"
                      placeholder="请输入订单编码"
                      size="small"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      size="small"
                      @click="handleQuery"
                      icon="el-icon-search"
                    >查询</el-button>
                  </el-form-item>
                  <!--  -->
                </el-form>
                <el-descriptions ref="returnByIddep">
                  <el-descriptions-item label="原订单号">{{ returnByIddep.orderId }}</el-descriptions-item>
                  <el-descriptions-item label="退款金额">{{ returnByIddep.returnAmount }}</el-descriptions-item>
                  <el-descriptions-item label="申请退货时间">{{ returnByIddep.applyDatetime }}</el-descriptions-item>
                  <el-descriptions-item label="退货状态">{{ returnByIddep.returnState }}</el-descriptions-item>
                  <el-descriptions-item label="退货原因">{{ returnByIddep.returnCause }}</el-descriptions-item>
                  <el-descriptions-item label="请求处理完成时间">{{ returnByIddep.returnDatetime }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="出库记录列表" name="fifth">
            <el-table v-loading="loading" :data="deliveryList">
              <el-table-column label="出货订单号" align="center" prop="orderId" />
              <el-table-column label="出货商品数目" align="center" prop="orderTotalQuantity" />
              <el-table-column label="商品出货时间" align="center" prop="datetime" width="240"/>
              <el-table-column label="出货订单优惠" align="center" prop="Discount" />
              <el-table-column label="出货订单收款" align="center" prop="orderRealPayment" />
              <el-table-column label="出货订单金额" align="center" prop="orderTotalAmount" width="240"/>
            </el-table>
            <el-pagination
              @size-change="handleDeSizeChange"
              @current-change="handleDeCurrentChange"
              :current-page="depageNum"
              :page-sizes="[5, 10, 50, 100]"
              :page-size="depageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="detotal"
              align="center"
              >
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="入库记录列表" name="sixth">
            <el-card shadow="hover" >
              <div slot="header" class="clearfix" style="line-height: 30px">
                <span><i class="el-icon-plus"></i> 添加入库记录</span>
              </div>
                <div class="text item">
                  <el-form ref="form" :model="storageItemVo" :inline="true" label-width="68px">
                  <!-- 创建申请 -->
                    <el-form-item label="服饰编号" prop="clId">
                      <el-input
                        v-model="storageItemVo.clId"
                        placeholder="请输入服饰编码"
                        size="small"
                        clearable
                        @keyup.enter.native="handleEnterStorage"
                      />
                    </el-form-item>
                    <el-form-item label="入库数目" prop="quantity">
                      <el-input
                        v-model="storageItemVo.quantity"
                        placeholder="请输入入库数目"
                        size="small"
                        clearable
                        @keyup.enter.native="handleEnterStorage"
                      />
                    </el-form-item>
                    <el-form-item label="服饰尺码" prop="clSize">
                      <el-select v-model="storageItemVo.clSize" clearable placeholder="请选择服饰尺码">
                        <el-option v-for="item in storageOptions" 
                          :key="item.value" 
                          :label="item.label" 
                          :value="item.value" 
                          @keyup.enter.native="handleEnterStorage">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        type="primary"
                        size="small"
                        @click="handleEnterStorage"
                        icon="el-icon-edit-outline"
                      >录入</el-button>
                    </el-form-item>
                    <!--  -->
                  </el-form>
                </div>
            </el-card>
            <el-table v-loading="loading" :data="storageList">
              <el-table-column label="入库服饰编号" align="center" prop="clId" />
              <el-table-column label="入库服饰尺码" align="center" prop="clSize" />
              <el-table-column label="服饰入库数目" align="center" prop="stQuantity" />
              <el-table-column label="服饰入库时间" align="center" prop="stDatetime" width="240"/>
            </el-table>
            <el-pagination
              @size-change="handleStSizeChange"
              @current-change="handleStCurrentChange"
              :current-page="stpageNum"
              :page-sizes="[5, 10, 50, 100]"
              :page-size="stpageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="sttotal"
              align="center"
              >
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
        <el-card v-if="activeTabName=='second'||activeTabName=='fourth'">
        <el-button-group >
          <el-button type="primary" size="small" @click="resetQuery">全部请求</el-button>
          <el-button type="primary" size="small" @click="handleStateQuery">待处理</el-button>
          <el-button type="success" size="small" @click="handleStatedAQuery">已退货</el-button>
          <el-button type="danger" size="small" @click="handleStatedFQuery">已拒绝</el-button>
        </el-button-group>
        <el-table v-loading="loading" :data="returnList">
          <el-table-column label="序号" align="center" prop="returnId" width="50" />
          <el-table-column label="原订单号" align="center" prop="orderId" />
          <el-table-column label="退款金额" align="center" prop="returnAmount" />
          <el-table-column label="申请退货时间" align="center" prop="applyDatetime" width="240"/>
          <el-table-column label="退货状态" align="center" prop="returnState" />
          <el-table-column label="退货原因" align="center" prop="returnCause" />
          <el-table-column label="请求处理完成时间" align="center" prop="returnDatetime" width="240"/>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          align="center"
          >
        </el-pagination>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listReturnByPage, listReturnStateByPage, listReturnStatedAByPage, listReturnStatedFByPage, getReturn, enterGsReturn, AgreeGsReturn, RefuseGsReturn } from '@/api/return'
import { listInventoryCate, listInventorySize, getInventoryId } from '@/api/inventory'
import { listDelivery } from '@/api/delivery'
import { listStorage, enterGsStorage } from '@/api/storage'
export default {
  name: 'Inventory',
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      detotal: 0,
      sttotal: 0,
      // 当前页
      pageNum: 1,
      depageNum: 1,
      stpageNum: 1,
      // 每页数据量
      pageSize: 5,
      depageSize: 5,
      stpageSize: 5,

      conditionforQuery: 'cate',

      // 输入：退货商品编码vo
      returnItemVo: {
        pageNum: 1,
        pageSize: 5,
        orderId:undefined,
        returnCause: undefined,
      },
      storageItemVo: {
        pageNum: 1,
        pageSize: 5,
        clId:undefined,
        quantity:undefined,
        clSize: undefined,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        clId: undefined,
        orderId: undefined,
        returnState: undefined,
      },
      options: [{
          value: '质量问题',
          label: '质量问题'
        }, {
          value: '不想要了',
          label: '不想要了'
        }, {
          value: '协商一致退货',
          label: '协商一致退货'
        }, {
          value: '其他',
          label: '其他'
        }],

        storageOptions: [{
          value: 'S',
          label: 'S'
        }, {
          value: 'M',
          label: 'M'
        }, {
          value: 'L',
          label: 'L'
        }],

      //退货明细
      returnByIddep: [
        {
          returnId: undefined,
          orderId: undefined,
          returnAmount: undefined,
          applyDatetime: undefined,
          returnState: undefined,
          returnCause: undefined,
          returnDatetime: 'undefined'
        }
      ],
      //库存明细
      /* inventoryByIddep: [
        {
          clName: undefined,
          hasSold: undefined,
          clCost: undefined,
          clId: undefined,
          inventory: undefined,
          clSalePrice: undefined,
        }
      ], */
      // 激活的tab名称
      activeTabName: 'first',
      
      // 展开的折叠面板
      activeCollapseName: 'one',

      rules: {
        orderId: [
          { required: true, message: "订单编号不能为空", trigger: "blur" },
        ],
        /* returnState: [
          { required: true, message: "服饰类别不能为空", trigger: "blur" },
        ], */
      },
    }
  },
  
  created() {
    this.getReturnList();
    this.getReturnStatedList();
    this.getInventoryCateList();
    this.getDeliveryList();
    this.getStorageList();
  },
  methods: {
    getInventoryCateList() {
      this.loading = true;
      listInventoryCate().then((response) => {
        this.inventoryList = response.data;
        this.loading = false;
      })
    },
    getInventorySizeList() {
      this.conditionforQuery = 'size';
      this.loading = true;
      listInventorySize().then((response) => {
        this.inventoryList = response.data;
        this.loading = false;
      })
    },
    getReturnList() {
      this.loading = true;
      listReturnByPage(this.queryParams).then((response) => {
        this.returnList = response.data.list;
        this.total = response.data.total;
        this.pageNum = response.data.pageNum;
        this.pageSize = response.data.pageSize;
        this.loading = false;
      })
    },
    getReturnStatedList() {
      this.loading = true;
      listReturnStateByPage(this.queryParams).then((response) => {
        this.returnStatedList = response.data.list;
        this.total = response.data.total;
        this.pageNum = response.data.pageNum;
        this.pageSize = response.data.pageSize;
        this.loading = false;
      })
    },
    getReturnByStateList() {
      this.loading = true;
      listReturnStateByPage(this.queryParams).then((response) => {
        this.returnList = response.data.list;
        this.total = response.data.total;
        this.pageNum = response.data.pageNum;
        this.pageSize = response.data.pageSize;
        this.loading = false;
      })
    },
    getReturnByStatedAList() {
      this.loading = true;
      listReturnStatedAByPage(this.queryParams).then((response) => {
        this.returnList = response.data.list;
        this.total = response.data.total;
        this.pageNum = response.data.pageNum;
        this.pageSize = response.data.pageSize;
        this.loading = false;
      })
    },
    getReturnByStatedFList() {
      this.loading = true;
      listReturnStatedFByPage(this.queryParams).then((response) => {
        this.returnList = response.data.list;
        this.total = response.data.total;
        this.pageNum = response.data.pageNum;
        this.pageSize = response.data.pageSize;
        this.loading = false;
      })
    },
    getDeliveryList(){
      this.loading = true;
      listDelivery(this.queryParams).then((response) => {
        this.deliveryList = response.data.list;
        this.detotal = response.data.total;
        this.depageNum = response.data.pageNum;
        this.depageSize = response.data.pageSize;
        this.loading = false;
      })
    },
    getStorageList(){
      this.loading = true;
      listStorage(this.queryParams).then((response) => {
        this.storageList = response.data.list;
        this.sttotal = response.data.total;
        this.stpageNum = response.data.pageNum;
        this.stpageSize = response.data.pageSize;
        this.loading = false;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      getReturn(this.queryParams.orderId).then((response) => {
        if(response.data){
          this.returnByIddep = response.data;
          this.$message.success("查询成功");
        }else{
          this.resetReturnByIddep();
          this.$message.error("请重新输入订单号");
        }
        this.loading = false;
        this.resetqueryParams();
      })
    },
    handleStateQuery(){
      this.getReturnByStateList();
    },

    handleStatedAQuery(){
      this.getReturnByStatedAList();
    },
    handleStatedFQuery(){
      this.getReturnByStatedFList();
    },
    handleInventoryCateQuery(){
      this.conditionforQuery = 'cate';
      this.getInventoryCateList();
    },
    handleInventorySizeQuery(){
      this.conditionforQuery = 'size';
      this.getInventorySizeList();
    },
    handleInventoryIdQuery(){
      this.loading = true;
      getInventoryId(this.queryParams.clId).then((response) => {
        this.inventoryByIdList = response.data;
        if(this.inventoryByIdList[0].hasSold){}else{
          this.inventoryByIdList[0].hasSold = 0;
        }
        this.loading = false;
        this.resetqueryParams();
      })
    },
    /** 创建退货申请 */
    handleEnterReturn() {
      enterGsReturn(this.returnItemVo.orderId, this.returnItemVo.returnCause).then((response) => {
        const flag = response.data;
        if(flag){
          this.$message.success('申请成功');
        }else{
          this.$message.error('操作失败');
        }
        this.resetreturnItemVo();
        this.getReturnList();
        this.getReturnStatedList();
        this.resetqueryParams();
      });
    },
    /**创建入库记录 */
    handleEnterStorage(){
      enterGsStorage(this.storageItemVo.clId, this.storageItemVo.quantity, this.storageItemVo.clSize).then((response) => {
        const List = response.data;
        if(List.clId){
          this.$message.success('添加成功');
        }else{
          this.$message.error('操作失败');
        }
      })
        this.resetstorageItemVo();
        this.getStorageList();
        this.resetqueryParams();

    },
    /** 同意退货申请 */
    handleAgree(row){
      AgreeGsReturn(row.orderId);
      this.$message.success('退货成功');
      this.getReturnStatedList();
    },
    /** 同意退货申请 */
    handleRefuse(row){
      RefuseGsReturn(row.orderId);
      this.$message.success('已拒绝');
      this.getReturnStatedList();
    },
    /** 切换tab */
    handleTabClick(tab, event) {
    },
    /** 清除数据 */
    clearAllData() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    resetreturnItemVo(){
      this.returnItemVo = {
        pageNum: 1,
        pageSize: 5,
        orderId:undefined,
        returnCause: undefined,
      }
    },
    resetstorageItemVo(){
      this.storageItemVo = {
        clId:undefined,
        quantity:undefined,
        clSize: undefined,
      }
    },
    resetqueryParams(){
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
        clId: undefined,
        orderId: undefined,
        returnState: undefined,
      }
    },
    resetQuery(){
      this.resetqueryParams();
      this.resetreturnItemVo();
      this.getReturnList();
    },
    resetReturnByIddep(){
      this.returnByIddep = 
        {
          returnId: undefined,
          orderId: undefined,
          returnAmount: undefined,
          applyDatetime: undefined,
          returnState: undefined,
          returnCause: undefined,
          returnDatetime: undefined
        }
    },
    /** 处理分页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getReturnList();
      this.getReturnById();
      this.getInventoryCateList();
      this.getInventorySizeList();
      this.getReturnByStatedAList();
      this.getReturnByStatedFList();
      this.getReturnStatedList();
    },
    handleStSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getStorageList();
    },
    handleDeSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getDeliveryList();
    },

    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getReturnList();
      this.getReturnById();
      this.getInventoryCateList();
      this.getInventorySizeList();
      this.getReturnByStatedAList();
      this.getReturnByStatedFList();
      this.getReturnStatedList();
    },
    handleStCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getStorageList();
    },
    handleDeCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getDeliveryList();
    },
  }
}
</script>

<style lang="scss" scoped>
  .card-panel-num1 {
    font-size: 30px;
    color: #40c9c6;
  }
  .card-panel-num2 {
    font-size: 40px;
    color: #eb0f0f;
  }
  .mb8 {
    margin-bottom: 8px;
  }
</style>




